<template>
    <div class="member">
       <header>
           <div class="title">寝室成员</div>
           <i class="iconfont icon-add1" @click="addMember()"></i>
       </header>
       <main>
          <div class="container" v-for="(item, index) in studentsArr" :key="index" >
           <div class="userinfo" @click="editMember(index)">
             <section>
             <span class="name">{{item.name}}</span>
             <span class="sex">{{item.sex}}</span>
             <span class="phone">{{item.phone}}</span>
             </section>
             <div class="s_id">学号：{{item.s_id}}</div>
           </div>
           <div class="remove-box">
             <div class="remove" @click="remove(index)">移除</div>
           </div>
          </div>
          
       </main>
       <!--模态框-->
          <div class="modal-box" v-if="isShow">
             <div class="bg"></div>
        
          <div class="context">
                 <i class="iconfont icon-close" @click="isClose()"></i>
                 <h3 v-if="addTitle">添加学生</h3>
                  <h3 v-else>学生信息</h3>
            <main>
           <div class="box">
               <input type="text" placeholder="请填写姓名" />
           </div>
           <div class="box">
               <input type="text" maxlength='11' placeholder="请填写手机号" />
           </div>
           </main>
           <div class="button">保存</div>
             </div>
          </div>
       <!--删除提示框-->
       <div class="remove-modal-box" v-if="isRemove"> 
          <div class="bg"></div>
          <div class="context">
              <h3>提示</h3>
              <p>您确定要删除董邦军同学?</p>
              <div class="button-box">
                <div class="cancel" @click="isClose()">取消</div>
                <div class="confirm" @click="confirm()">确定</div>
              </div>
          </div>
       </div>
    </div>
</template>
<script>
import base from "../assets/js/base.js";
export default {
  name: "Member",
  data() {
    return {
      studentsArr: [
        {
          name: "欧阳娜娜",
          sex: "女",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "薛文成",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },

        {
          name: "张君宝",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        {
          name: "陈友谅",
          sex: "男",
          phone: "13203565856",
          s_id: "20189013252"
        },
        { name: "吴起", sex: "男", phone: "13203565856", s_id: "20189013252" }
      ],
      sexIndex: "1",
      isShow: false, //模态框判断条件
      isRemove: false,
      addTitle:false,//控制模态框标题
    };
  },
  methods: {
    /***关闭模态框***/
    isClose() {
      base.openScroll();
      this.isShow = false;
      this.isRemove = false;
      this.addTitle=false;
    },
    /***添加寝室成员***/
    addMember() {
      base.forbiddenScroll();
      this.isShow = true;
      this.addTitle=true;
    },
    /***编辑寝室成员***/
    editMember(i) {
      base.forbiddenScroll();
      this.isShow = true;
      this.addTitle=false;
    },
    /***修改性别***/
    isSelected(val) {
      this.sexIndex = val;
    },
    /***删除成员***/
    remove(i) {
      base.forbiddenScroll();
      this.isRemove = true;
    },
    /***确认删除***/
    confirm(){

    }
  },
  created() {

  },
  mounted() {
    base.changeTabbar("#member");
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/base.scss";
.member {
  height: 100%;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 ptr(20px);
  height: ptr(60px);
  background-color: #fff;
  font-size: ptr(18px);
  box-sizing: border-box;
  .title {
    color: #666;
    font-weight: 600;
  }
  .iconfont {
    color: #0cb0b5;
    font-size: ptr(32px);
  }
}
main {
  padding-top: ptr(61px);
  margin-bottom: ptr(70px);
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: ptr(5px) 0;
    padding: ptr(10px) ptr(20px);
    background-color: #fff;
    box-sizing: border-box;
    .userinfo {
      width: 70%;
      color: #0cb0b5;
      font-size: ptr(16px);
      section {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .s_id {
        color: #666;
        font-size: ptr(14px);
      }
    }
    .remove-box {
      width: 30%;
      display: flex;
      justify-content: flex-end;
      .remove {
        width: ptr(55px);
        height: ptr(28px);
        color: #fff;
        line-height: ptr(28px);
        text-align: center;
        font-size: ptr(14px);
        border-radius: ptr(5px);
        background-color: #2484fb;
      }
    }
  }
}
.modal-box {
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    background: #000;
  }
  .context {
    position: fixed;
    z-index: 3;
    top: 50%;
    left: 50%;
    border-radius: ptr(8px);
    margin-top: ptr(-102px);
    margin-left: ptr(-150px);
    width: ptr(300px);
    height: ptr(204px);
    background-color: #fff;
    .icon-close {
      position: absolute;
      font-size: ptr(20px);
      right: ptr(-10px);
      top: ptr(-15px);
      color: #000;
    }
    h3 {
      font-size: ptr(14px);
      padding: ptr(5px) 0 ptr(5px) ptr(20px);
      border-bottom: ptr(1px) solid #999;
    }
    main {
      padding: ptr(20px);
      box-sizing: border-box;
      margin-bottom: 0;
      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: ptr(10px);
        input[type="text"] {
          padding: 0 ptr(5px);
          vertical-align: top;
          width: 100%;
          height: ptr(30px);
          outline: none;
          border-radius: ptr(5px);
          border: ptr(1px) solid #999;
        }
      }
    }
    .button {
      margin: 0 ptr(20px) 0;
      font-size: ptr(14px);
      border-radius: ptr(8px);
      color: #fff;
      height: ptr(30px);
      text-align: center;
      line-height: ptr(30px);
      background-color: #0cb0b5;
    }
  }
}
.remove-modal-box {
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    background: #000;
  }
  .context {
    position: fixed;
    z-index: 3;
    top: 50%;
    left: 50%;
    text-align: center;
    margin-left: ptr(-125px);
    margin-top: ptr(-81px);
    border-radius: ptr(8px);
    width: ptr(250px);
    height: ptr(162px);
    border: ptr(1px) solid #fcfcfc;
    background-color: #fff;
    h3 {
      color: red;
      font-size: ptr(18px);
      font-weight: 600;
      margin: ptr(10px) auto;
    }
    p {
      padding: 0 ptr(20px);
      font-size: ptr(16px);
      letter-spacing: ptr(1px);
    }
    .button-box {
      position: absolute;
      bottom: 0;
      display: flex;
      width: 100%;
      justify-content: space-around;
      align-items: center;
      height: ptr(40px);
      .cancel {
        height: ptr(32px);
        width: 45%;
        color: #fff;
        line-height: ptr(32px);
        border-radius: ptr(8px);
        background-color: #2484fb;
      }
      .confirm {
        height: ptr(32px);
        width: 45%;
        color: #fff;
        line-height: ptr(32px);
        border-radius: ptr(8px);
        background-color: #e3656f;

      }
    }
  }
}
/***适配iPhone X***/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .member > main {
    margin-bottom: ptr(104px);
  }
}
</style>



